$(function () {
    //把q变成全局变量   将来好修改值
    let q = {
        pagenum: 1,	    //是	int	页码值
        pagesize: 5,	//是	int	每页显示多少条数据
        cate_id: '',	//否	string	文章分类的 Id
        state: '',	    //否	string	文章的状态，可选值有：已发布、草稿
    }


    //初始化状态
    initArticleList()
    function initArticleList() {
        axios({
            method: 'GET',
            url: '/my/article/list',
            params: q
        }).then(({ data: res }) => {
            if (res.status !== 0) {
                return layer.msg(res.massage)
            }
            //渲染
            let arr = []
            res.data.forEach(ele => {
                arr.push(`<tr>
                        <td>
                            <a href="javascript:;" style="color: blue;">${ele.title}</a>
                        </td>
                        <td>${ele.cate_name}</td>
                        <td>${formatDate(ele.pub_date)}</td>
                        <td>${ele.state}</td>
                        <td>
                            <a href='/articre/art_edit.html?id=${ele.Id}' class="layui-btn layui-btn-xs">编辑</a>
                            <button  data-id="${ele.Id}" class="layui-btn layui-btn-xs layui-btn-danger">删除</button>
                        </td>
                    </tr>`)
            })
            //循环完毕后赋值
            $('tbody').empty().html(arr.join(''))
            renderPaga(res.total)
            // console.log(res.total);
        })
    }

    //需求2
    let form = layui.form
    //初始化文章列表分类-封装成函数
    initArtCateList()

    function initArtCateList() {
        //发送ajax
        axios({
            method: 'get',
            url: '/my/article/cates',
        }).then(({ data: res }) => {
            // console.log(res);
            if (res.status !== 0) {
                return layer.msg(res.massage)
            }
            //成功后渲染
            let arr = [`<option value="">请输入文章列表</option>`]
            res.data.forEach(ele => {
                if (ele.Id < 0) return
                arr.push(`<option value="${ele.Id}">${ele.name}</option>`)
            })
            //循环完毕后赋值
            //也可以写个变量  进行渲染
            //let sty = arr.join('')
            $('[name=cate_id]').empty().html(arr.join(''))

            form.render()
        })
    }

    //点击筛选，渲染页面
    $('#searchForm').on('submit', function (e) {
        e.preventDefault()
        q.cate_id = $('[name=cate_id]').val()
        q.state = $('[name=state]').val()
        initArticleList()
    })

    //分页  需要封装成函数
    function renderPaga(total) {
        var laypage = layui.laypage;

        //执行一个laypage实例
        laypage.render({
            elem: 'pagBox', //注意，这里的 test1 是 ID，不用加 # 号
            count: total, //数据总数，从服务端得到
            limit: q.pagesize,//每页显示的条数。laypage将会借助 count 和 limit 计算出分页数。
            curr: q.pagenum, //起始页
            limits: [2, 5, 10, 15, 20],
            layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'],
            jump: function (obj, first) {
                //obj包含了当前分页的所有参数，比如：
                // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                // console.log(obj.limit); //得到每页显示的条数

                //首次不执行
                if (!first) {
                    q.pagesize = obj.limit
                    q.pagenum = obj.curr
                    //在次渲染页面
                    initArticleList()
                }
            }
        });
    }

    //删除文章  需要用到事件委托
    $('tbody').on('click', '.layui-btn', function () {
        let id = $(this).attr('data-id')
        layer.confirm('确认删除吗?', { icon: 3, title: '提示' }, function (index) {
            //do something
            axios({
                method: 'GET',
                url: '/my/article/delete/' + id,
            }).then(({ data: res }) => {
                if (res.status != 0) {
                    return layer.msg(res.massage)
                }
                layer.msg('恭喜您删除文章成功！')
                if ($('.layui-btn').length == 1 && q.pagenum >= 2) {
                    q.pagenum--
                }
                initArticleList()
            })
            layer.close(index);
        });
    })
})